<template>
	<kb-layout>

		<view class="formbd">	
			<up-form labelPosition="left" :model="userInfo" ref="form1" 
			labelWidth="50" label-align="left">
			
				
				<up-form-item label="头像" prop="avatar" borderBottom ref="avatar">
					<!-- #ifdef MP-WEIXIN -->
					<button class="avatar-wrapper"
						open-type="chooseAvatar"						
						@chooseavatar="onChooseAvatar">
					      <image class="imgview" :src="userInfo.new_avatar"></image>
					</button> 
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN --> 
					<up-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							:uploadText="'上传头像'"
							:multiple="false"
							:maxCount="1"
						></up-upload>
				 <!-- #endif -->
				</up-form-item>

				
				<up-form-item label="昵称" prop="nickname" borderBottom ref="nickname">
					<!-- #ifdef MP-WEIXIN -->
				<input class="oneinput" 
				 type="nickname" name="nickname" 
				  v-model="userInfo.nickname"  placeholder="请填写您的姓名" />
   
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<up-input v-model="userInfo.nickname"></up-input>
					<!-- #endif -->					
				</up-form-item>
				
				<view class="form-action">
					<view class="acbod">
						<up-button type="primary" @click="submitForm" text="提交"></up-button>
					</view>
				</view>
				
			</up-form>
		</view>	
	</kb-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
import util from '../../common/tools/utils';
	const fileList1 = ref([]);
	const userInfo = reactive({
		nickname: '',
		avatar: '',
		new_avatar: '',
		broker_id: 0,
	})
	const form1 = ref('form1');
	
	const submitForm = function(){ 
		if(fileList1.value.length){
			userInfo.avatar = fileList1.value[0]['save_url'];
		}		
		util.getModuleData('favorite/modifyuser', userInfo ).then(ret =>{
			 //保存数据
			uni.showToast({
				title:'保存成功', icon:'none'
			})
		})
	}
	onMounted(()=>{
		util.getModuleData("favorite/modifyuser").then(ret => {
			userInfo.nickname = ret?.nickname || '';
			userInfo.avatar = ret?.avatar || '';
			userInfo.broker_id = ret?.id || 0; 
			userInfo.new_avatar = ret?.avatar || '';
		 });
	})
	const onChooseAvatar = (e) => {
		const avatarUrl = e.detail.avatarUrl;
			//专门给微信的上传头像
		const uploadTask = wx.uploadFile({
		   'url':  util.getModuleUrl('transfile'), 
		   filePath: avatarUrl ,
		   name: 'upfile',
		   formData: {},
		   success: function (res) {	
			   if(res?.statusCode == 200){
				  var data = JSON.parse(res.data);
				  if(data.errno == 0){ 
						 userInfo.avatar =  data.data.thumb;
						 userInfo.new_avatar = data.data.url;	
						 //
						 util.getModuleData('favorite/modifyuser', userInfo ).then(ret =>{
						 	 //保存数据
						 	uni.showToast({
						 		title:'保存成功', icon:'none'
						 	}) 	
						 })
										  
					}
				}  					 
			} 
		})
		 
	}
	// 删除图片
	const deletePic = (event) => {
	  fileList1.value.splice(event.index, 1);
	};
	
	// 新增图片
	const afterRead = async (event) => {
	  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	  let file = event.file ;
	  let fileListLen = fileList1.value.length;
	 
	    fileList1.value  =[ {
	      ...file,
	      status: 'uploading',
	      message: '上传中',
	    }] ;	  
	 
		let item = fileList1.value ;   
	   uploadFilePromise(file.url).then( result => {		  
		   fileList1.value =[ {
		     ...item,
		     status: 'success',
		     message: '',
		     url: result.url,
		     save_url: result .thumb,
		   } ];
	   }).catch(e => {		   
		   uni.showToast({
		   	title:'上传失败', icon:'none'
		   })
		    fileList1.value.splice(event.index, 1);
	   })
	};
	
	const uploadFilePromise = (url) => {
	  return new Promise((resolve, reject) => {
	    let a = uni.uploadFile({
	      url: util.getModuleUrl('transfile'), // 仅为示例，非真实的接口地址
	      filePath: url,
	      name: 'upfile', 
	      success: (res) => {
			 if(res?.statusCode == 200){	
				  var data = JSON.parse(res.data);
				  if(data.errno == 0)
					resolve( data.data  )	
				   else
						reject( )
			 }else{				 
				 reject( );
			 }
	      },
	    });
	  });
	};
	
</script>

<style lang="scss">
	.formbd {
		background-color: #fff;
		margin: 10rpx;
		border-radius: 20rpx;
		padding: 30rpx;
	}
	.form-action{
		margin-top: 40rpx;
	}
	.avatar-wrapper{
		 width: 180rpx;
		 height: 180rpx; 
		 padding:0px; 
		 
		.imgview{
			width: 180rpx;
			height: 180rpx; 
		}
	}
</style>